<template>
  <div class="user-info">
    <pageHeader></pageHeader>
    <div class="user-content">
      <div class="user-title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/personalcenter/index' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>基本资料</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="user-form">
        <div class="user-form-info">
          <div class="user-form-info-one">
            <div class="userinfo-basic">
              <div class="userinfo-basic-pic">
                <img :src="iconImg" alt />
              </div>
              <div class="title">基本资料</div>
            </div>
            <div class="userinfo-form">
              <el-form ref="form" :model="userForm" :rules="rules" label-width="60px" label-position="right">
                <el-form-item label="姓名:" prop="username">
                  <el-input class="user-name" disabled v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="年龄:" prop="age">
                  <el-input v-model="userForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="userForm.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="生日:" prop="birthday">
                  <el-date-picker v-model="userForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="籍贯:" prop="nativePlace">
                  <el-select v-model="userForm.nativePlace" placeholder="请选择籍贯">
                    <el-option v-for="item in nativePlaces" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                  <el-input disabled v-model="userForm.phone"></el-input>
                </el-form-item>
                <!-- <el-form-item label="密码:" prop="password">
                  <el-input :disabled="disabled" v-model="userForm.password" type="password" show-password></el-input>
                  <el-button type="text" @click="updatePass" class="uPass">修改密码</el-button>
                </el-form-item> -->
                <el-form-item label="">
                  <el-button type="primary" class="userinfo-btn-el" @click="updatePass" round>修改密码</el-button>
                  <el-button type="primary" class="userinfo-btn-el" @click="onSubmit('form')" round>保 存</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-dialog title="修改密码" :visible.sync="changePassword.open" width="width" @close="closeDialog">
              <el-form ref="changePasswordForm" :rules="changePassword.rules" :model="changePassword.form" label-width="100px">
                <el-form-item label="新密码：" prop="newPassword">
                  <el-input placeholder="请输入新密码" v-model="changePassword.form.newPassword" show-password></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer">
                <el-button @click="changePassword.open = false">取 消</el-button>
                <el-button type="primary" @click="submitChangePassword">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <div class="user-form-info-two">
            <el-upload class="avatar-uploader" action="/wisdomlearn/base/fileUpload" :show-file-list="false" :on-success="handleAvatarSuccess">
              <img v-if="userForm.icon" :src="config.imgPath + '/' + userForm.icon" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <el-button class="changeHead" icon="el-icon-edit-outline" size="small" round>修改头像</el-button>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  components: {
    pageHeader,
    PageFooter
  },
  inject: ["reload"],
  data() {
    let checkAge = (rule, value, callback) => {
      if (/(^[1-9]\d*$)/.test(value) && value < 150) {
        callback();
      } else {
        callback(new Error("请输入正确的年龄"));
      }
    };
    let checkPhone = (rule, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };
    return {
      // 修改密码弹窗
      changePassword: {
        open: false,
        form: {
          newPassword: ""
        },
        rules: {
          newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }]
        }
      },
      disabled: true,
      iconImg: require("@/assets/img/personCenter/icon.png"),
      userPic: require("@/assets/imgs/at1.png"),
      nativePlaces: [
        {
          label: "上海",
          value: "上海"
        },
        {
          label: "江苏",
          value: "江苏"
        },
        {
          label: "浙江",
          value: "浙江"
        },
        {
          label: "安徽",
          value: "安徽"
        },
        {
          label: "北京",
          value: "北京"
        },
        {
          label: "天津",
          value: "天津"
        },
        {
          label: "广东",
          value: "广东"
        },
        {
          label: "河北",
          value: "河北"
        },
        {
          label: "河南",
          value: "河南"
        },
        {
          label: "山东",
          value: "山东"
        },
        {
          label: "湖北",
          value: "湖北"
        },
        {
          label: "湖南",
          value: "湖南"
        },
        {
          label: "江西",
          value: "江西"
        },
        {
          label: "福建",
          value: "福建"
        },
        {
          label: "四川",
          value: "四川"
        },
        {
          label: "重庆",
          value: "重庆"
        },
        {
          label: "广西",
          value: "广西"
        },
        {
          label: "山西",
          value: "山西"
        },
        {
          label: "辽宁",
          value: "辽宁"
        },
        {
          label: "吉林",
          value: "吉林"
        },
        {
          label: "黑龙江",
          value: "黑龙江"
        },
        {
          label: "贵州",
          value: "贵州"
        },
        {
          label: "陕西",
          value: "陕西"
        },
        {
          label: "云南",
          value: "云南"
        },
        {
          label: "内蒙古",
          value: "内蒙古"
        },
        {
          label: "甘肃",
          value: "甘肃"
        },
        {
          label: "青海",
          value: "青海"
        },
        {
          label: "宁夏",
          value: "宁夏"
        },
        {
          label: "新疆",
          value: "新疆"
        },
        {
          label: "海南",
          value: "海南"
        },
        {
          label: "西藏",
          value: "西藏"
        },
        {
          label: "香港",
          value: "香港"
        },
        {
          label: "澳门",
          value: "澳门"
        },
        {
          label: "台湾",
          value: "台湾"
        }
      ],
      rules: {
        username: [{ message: "请输入姓名", trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
        nativePlace: [{ message: "请选择籍贯", trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        password: [{ message: "请输入密码", trigger: "blur" }]
      },
      userForm: {
        username: "",
        age: "",
        sex: 1,
        birthday: "",
        nativePlace: "",
        phone: "",
        job: "",
        password: "",
        icon: ""
      }
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/user/v1/queryuserInfo",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/user/v1/queryuserInfo", time),
            timestamp: time
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.userForm.username = res.data.username;
            that.userForm.age = res.data.age;
            that.userForm.birthday = res.data.birthday;
            that.userForm.nativePlace = res.data.nativePlace;
            that.userForm.phone = res.data.phone;
            that.userForm.password = "";
            that.userForm.sex = res.data.sex;
            that.userForm.icon = res.data.pictureUrl;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onSubmit(formName) {
      let that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that
            .$http({
              url: "/wisdomlearn/user/v1/updateUserInfo",
              method: "post",
              data: {
                age: that.userForm.age,
                sex: that.userForm.sex,
                birthday: that.tool.timeFormTransformation(that.userForm.birthday),
                nativePlace: that.userForm.nativePlace,
                pictureUrl: that.userForm.icon,
                password: that.userForm.password
              }
            })
            .then(res => {
              if (res && res.retCode == "00000") {
                that.$message({
                  message: "保存成功！",
                  type: "success"
                });
                this.disabled = true;
                this.userForm.password = "";
                let time = new Date().valueOf();
                that
                  .$http({
                    url: "/wisdomlearn/user/v1/queryuserInfo",
                    method: "post",
                    headers: {
                      accessToken: that.config.token,
                      appId: that.config.appId,
                      userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
                      clientId: "",
                      sign: that.tool.sign("/wisdomlearn/user/v1/queryuserInfo", time),
                      timestamp: time
                    }
                  })
                  .then(res => {
                    that.tool.setCookie(
                      "xinyun-front-userInfo",
                      JSON.stringify({
                        name: res.data.username,
                        userId: res.data.userId,
                        icon: res.data.pictureUrl
                      })
                    );
                    that.reload();
                  })
                  .catch(err => {
                    console.log(err);
                  });
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      if (res.retCode == "00000") {
        this.$set(this.userForm, "icon", res.data.path[0]);
      }
    },
    // 修改密码
    updatePass() {
      this.changePassword.open = true;
    },
    // 修改密码确定
    submitChangePassword() {
      let that = this;
      that.$refs["changePasswordForm"].validate(valid => {
        if (valid) {
          that
            .$http({
              url: "/wisdomlearn/user/v1/updateUserInfo",
              method: "post",
              data: {
                age: that.userForm.age,
                sex: that.userForm.sex,
                birthday: that.tool.timeFormTransformation(that.userForm.birthday),
                nativePlace: that.userForm.nativePlace,
                pictureUrl: that.userForm.icon,
                password: that.changePassword.form.newPassword
              }
            })
            .then(res => {
              if (res && res.retCode == "00000") {
                that.$message({
                  message: "修改密码成功！",
                  type: "success"
                });
                let time = new Date().valueOf();
                that
                  .$http({
                    url: "/wisdomlearn/user/v1/queryuserInfo",
                    method: "post",
                    headers: {
                      accessToken: that.config.token,
                      appId: that.config.appId,
                      userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
                      clientId: "",
                      sign: that.tool.sign("/wisdomlearn/user/v1/queryuserInfo", time),
                      timestamp: time
                    }
                  })
                  .then(res => {
                    that.changePassword.open = false;
                    that.tool.setCookie(
                      "xinyun-front-userInfo",
                      JSON.stringify({
                        name: res.data.username,
                        userId: res.data.userId,
                        icon: res.data.pictureUrl
                      })
                    );
                    that.reload();
                  })
                  .catch(() => {});
              }
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
    // 关闭修改密码弹窗
    closeDialog() {
      this.changePassword.open = false;
      this.changePassword.form = {};
    }
  }
};
</script>
<style scoped>
.user-pic img {
  width: 132.8px;
  height: 132.8px;
  border-radius: 50%;
  text-align: center;
}
.userinfo-form {
  display: flex;
  justify-content: center;
}
.userinfo-basic-pic {
  width: 29px;
  height: 29px;
  margin-right: 10px;
}
.userinfo-basic {
  display: flex;
  padding-left: 145px;
  padding-bottom: 50px;
  font-size: 24px;
}
.userinfo-basic .title {
  font-size: 24px;
  color: #161617;
  letter-spacing: 0.09px;
}
.userinfo-btn-el {
  width: 150px;
  background: #1968bb;
  border: 1px solid #1968bb;
  border-radius: 23px;
}
.user-form-info-one {
  width: 800px;
}
.user-pic {
  width: 132.8px;
  height: 132.8px;
  border-radius: 132.8px;
}
.el-input {
  width: 400px;
}
.user-form {
  display: flex;
  width: 100%;
  background-color: #f6f6f6;
  justify-content: center;
}
.user-form-info {
  width: 1200px;
  background-color: #ffffff;
  display: flex;
  margin: 30px 0;
  padding: 80px 0;
}
.user-content {
  min-width: 1200px;
  min-height: 768px;
}
.user-title {
  width: 100%;
  height: 82px;
  background-color: #f0efef;
  font-family: PingFangSC-Medium;
  font-size: 21px;
  display: flex;
  align-items: center;
}
.user-title p {
  width: 1200px;
  margin: 0 auto;
}
.changeHead {
  background: #1968bb;
  border-radius: 14.5px;
  color: #fff;
  margin-top: 20px;
}
.uPass {
  margin-left: 10px;
}
</style>
<style>
.el-breadcrumb {
  width: 1200px;
  margin: 0 auto;
}
.el-form-item__label {
  color: #161617;
  letter-spacing: 0.08px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  border-radius: 50%;
}
</style>
